<template>
	<view>
		<view class="news">
			<view class="news-list">
				<view class="news-item" v-for="item in selectList">
					<view class="left">
						<view class="top">
							<text class="name">{{item.title}}</text>
						</view>
						<view class="bottom">
							<text>{{item.readNum}} 观看</text>
							<text>{{item.likeNum}} 点赞</text>
						</view>
					</view>
					<navigator :url="`/pages/news-detail/news-detail?id=${item.id}`" class="right">
						<image :src="$baseUrl + item.cover" mode=""></image>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectList: []
			};
		},
		onLoad(option) {
			this.getSelect(option.key)
		},
		methods: {
			getSelect(key){
				console.log(key)
				this.$request({
					url: '/prod-api/press/press/list'
				}).then(res => {
					console.log(res)
					this.selectList = res.rows.filter(item => item.title.includes(key))
				})
			}
		}
	}
</script>

<style lang="scss">
view{
	.news{
		margin-top: 20rpx;
		background-color: #fff;
		.news-list{
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			.news-item{
				padding: 20rpx 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-top: 2rpx solid #e4e7ed;
				.left{
					.top{
						width: 450rpx;
						height: 168rpx;
						.name{
							font-size: 32rpx;
							line-height: 1.5;
							font-weight: bold;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
						.desc{
							font-size: 26rpx;
							line-height: 1.5;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
					}
					.bottom{
						display: flex;
						flex-direction: row;
						justify-content: start;
						text{
							margin-left: 20rpx;
							color: #909399;
							font-size: 22rpx;
							&:first-child{
								margin-left: 0;
							}
						}
					}
				}
				.right{
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 250rpx;
						height: 200rpx;
					}
				}
			}
		}
	}
}
</style>
